<template>
    <div class="tr">
      <div class="tr-top">
        <div class="left">
          <div class="itm"><el-button @click="addEv">新增</el-button></div>
        </div>
        <div class="right">
          <div class="itm"> <el-input clearable v-model="tableObjData.value__like" style="width: 240px"
              placeholder="输入名称" /></div>
          <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
        </div>
      </div>
      <div class="table-content">
        <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
          <el-table-column align="center" show-overflow-tooltip type="index" label="#" width="50" />
          <el-table-column align="center" show-overflow-tooltip header-align="center" prop="value" label="资料编码" width="180" />
          <el-table-column align="center" show-overflow-tooltip header-align="center" prop="label" label="资料名称" width="180" />
          <el-table-column align="center" show-overflow-tooltip header-align="center" prop="sort" label="排序" width="180" />
          <el-table-column align="center" show-overflow-tooltip header-align="center" prop="rem" label="备注说明" width="180" />
          <el-table-column align="center" show-overflow-tooltip header-align="center" prop="status" label="状态" width="180" >
            <template #default="scope">
            <el-tag type="success" v-if="scope.row.status==true">有效</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip header-align="center" label="操作" width="280">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="editRowEv(scope.row.id)">
                编辑
              </el-button>
              <el-popconfirm placement="left-end" width="220" confirm-button-text="停用" cancel-button-text="取消"
                icon-color="#626AEF" confirm-button-type="text" title="是否确认停用此数据" @confirm="deleteSelRowEv(scope.row)">
                <template #reference>
                  <el-button link type="primary" size="small">停用</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
        v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
  
      <addEdit ref="refAddEdit" @emitGetDataEv="emitGetDataEv" />
    </div>
  </template>
  
  <script setup>
  import { BasicListGet, BasicPkDelete } from '@/api/setting/basic/index.js'
  import { ref, reactive, onMounted, onActivated } from 'vue'
  import addEdit from '@/views/setting/basic/components/addEdit.vue'
  import { loadingStore } from '@/stores/index.js'
  
  const loading = loadingStore()
  let tableListData = ref([])
  let refAddEdit = ref(null)
  let tableObjData = reactive({
    value__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pageSize: 20
  })
  
  onMounted(() => {
    getEv(false)
  })
  onActivated(() => {
  
  })
  const addEv = () => {
    refAddEdit.value.dialogVisible = true
    refAddEdit.value.isAdd = true
  }
  // 查询数据
  const getEv = async (msg) => {
    loading.loading = true
    try {
      let arr_data = await BasicListGet(tableObjData)
      if (arr_data.status != 200) {
        return
      }
      if (msg == true) {
        ElMessage.success('查询成功')
      }
      tableListData.value = arr_data.data.result.data
      tableObjData.total = arr_data.data.result.total
      tableObjData.has_next = arr_data.data.result.has_next
      tableObjData.has_prev = arr_data.data.result.has_prev
      tableObjData.page = arr_data.data.result.page
      tableObjData.pageSize = arr_data.data.result.pageSize
  
    } catch (error) {
      ElMessage.error('查询接口请求失败' + error)
    } finally {
      loading.loading = false
    }
  }
  
  // 子组件操作后查询数据
  const emitGetDataEv = (val) => {
    tableObjData.page = 1
    tableObjData.name__like = val
    getEv()
  }
  
  
  const editRowEv = (rowId) =>{
    refAddEdit.value.updateSelRowEv(rowId)
  }
  
  // 删除数据
  const deleteSelRowEv = async (row) => {
    loading.loading = true
    try {
      let arr_data = await BasicPkDelete(row.id)
      if (arr_data.status != 200) {
        return
      }
      await getEv(false)
      ElMessage.success('删除成功')
    } catch (error) {
      ElMessage.error('删除接口请求失败' + error)
    }finally {
      loading.loading = false
    }
  }
  
  </script>
  
  <style lang='less' scoped>
  .tr {
    height: 100%;
  }
  
  .tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    .right {
      display: flex;
      align-items: center;
    }
  
    .itm {
      padding-right: 4px;
      box-sizing: border-box;
    }
  }
  
  .table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
  }
  
  .dialog-content {
    display: flex;
    align-items: center;
    height: 40px;
  
    .left {
      width: 60px;
      text-align: right;
      padding-right: 5px;
      box-sizing: border-box;
    }
  }
  </style>